<template>
  <div class="dashboard-container">
    <el-card>
      <div class="alert">
        <el-alert
          title="本数据统计来源于Python爬虫实时统计JD的数据源"
          type="warning"
        >
          <i class="el-icon-warning" />
        </el-alert>
      </div>
      <el-row>
        <el-col :span="12">
          <div class="withdrawal">
            <h3>提现统计</h3>
            <el-row>
              <el-col :span="6">
                <span class="sum">总提现:1540W</span>
              </el-col>
              <el-col :span="16" class="date">
                <span>本周</span>
                <span>本月</span>
                <span class="year">全年</span>
                <span class="calendar">2015-10-02 ~ 2015-10-10 <i class="el-icon-date" /></span>
              </el-col>
            </el-row>
            <div class="withdrawal-chart"><withdrawal /></div>
            <div class="tips">
              <div class="user" />
              <div>用户提现</div>
              <div class="store" />
              <div>商铺提现</div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="earnings">
            <h3>平台收益渠道统计</h3>
            <div class="quarter">
              <span class="one">一季度</span>
              <span>二季度</span>
              <span>三季度</span>
            </div>
            <el-row>
              <el-col :span="8">
                <div class="earnings-chart"><earnings /></div>
              </el-col>
              <el-col :span="16">
                <div class="tips">
                  <div><i class="ele" /><span class="text">家用电器</span><span class="percent">|&nbsp;&nbsp;36%</span><span>￥44,361</span></div>
                  <div><i class="drinks" /><span class="text">食用酒水</span><span class="percent">|&nbsp;&nbsp;20%</span><span>￥24,644</span></div>
                  <div><i class="health" /><span class="text">个护健康</span><span class="percent">|&nbsp;&nbsp;16%</span><span>￥19,715</span></div>
                  <div><i class="costume" /><span class="text">服饰箱包</span><span class="percent">|&nbsp;&nbsp;10%</span><span>￥12,322</span></div>
                  <div><i class="infant" /><span class="text">母婴产品</span><span class="percent-infant">|&nbsp;&nbsp;9%&nbsp;</span><span>￥11,091</span></div>
                  <div><i class="other" /><span class="text">其他&nbsp;</span><span class="percent-other">|&nbsp;&nbsp;9%</span><span>￥11,091</span></div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="discounts">
            <h3>平台优惠券趋势统计</h3>
            <el-row>
              <el-col :span="8">
                <div class="text">今日优惠券交易总额</div>
                <div class="data">124,543,233<i>元</i></div>
              </el-col>
              <el-col :span="8">
                <div class="text">优惠券使用率</div>
                <div class="data">92%</div>
              </el-col>
            </el-row>
            <div class="discounts-chart"><discounts /></div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="store">
            <h3>店铺类型</h3>
            <div class="store-chart"><store /></div>
            <el-row class="tips">
              <el-col :span="6"><i /><span>待审核</span></el-col>
              <el-col :span="6"><i class="dot-store" /><span>共享商铺</span></el-col>
              <el-col :span="6"><i class="dot-illegal" /><span>违规被停运</span></el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="order">
            <h3>订单统计</h3>
            <el-row>
              <el-col :span="4" class="left">
                <div class="text">累计天订单成交量</div>
                <div class="top"><span class="num">4320</span><span class="compare">较昨日</span><i class="el-icon-caret-top" /><span>12%</span></div>
                <div class="text">本周退单率</div>
                <div><span class="num">342</span><span class="compare">周环比</span><i class="el-icon-caret-bottom" /><span>10%</span></div>
              </el-col>
              <el-col :span="20">
                <el-row>
                  <el-col :span="12"><div style="margin-left: 60px;">订单趋势</div></el-col>
                  <el-col :span="12">
                    <div class="date">
                      <span class="week">本周</span>
                      <span>本月</span>
                      <span>全年</span>
                      <span class="calendar">2015-10-02 ~ 2015-10-10 <i class="el-icon-date" /></span>
                    </div>
                  </el-col>
                </el-row>
                <div class="order-chart"><order /></div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Withdrawal from './components/withdrawal'
import earnings from './components/earnings'
import discounts from './components/discounts'
import store from './components/store'
import order from './components/order'
export default {
  name: 'Dashboard',
  components: {
    Withdrawal, earnings, discounts, store, order
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  }

}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }

}
.dashboard-container {
  .el-card {
    .alert {
      width: 500px;
      .el-alert {
        margin-bottom: 10px;
        background-color: #FFFBE6;
        border: 1px solid #facc14;
        color: #5A5A5A;
        padding-left: 34px;
        padding-bottom: 3px;
        ::v-deep .el-alert__title {
          font-size: 14px;
          font-weight: normal;
        }
        i {
          color: #facc14;
          position: absolute;
          top: 10px;
          left: 15px;
          font-size: 16px;
        }
      }
    }
  }

  h3 {
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
  }
  .sum {
    font-size: 12px;
    color: #999;
  }
  .date {
    span {
      font-size: 14px;
      margin-right: 10px;
    }
  .year {
    background-color: #1890FF;
    color: #fff;
    border-radius: 5px;
    padding: 2px 10px;
  }
  .calendar {
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: #666;
    padding: 2px 10px;
    i {
      margin-left: 10px;
    }
    }
  }

  .withdrawal {
    width: 100%;
    .withdrawal-chart {
      width: 100%;
      height: 300px;
    }
    .tips {
      display: flex;
      justify-content: flex-start;
      font-size: 14px;
      color: #666;
      div {
        margin-top: -35px;
      }
      .user {
        width: 8px;
        height: 5px;
        border-radius: 4px;
        background-color: #2fc25b;
        margin-left: 70px;
        margin-top: -30px;
        margin-right: 10px;
      }
      .store {
        width: 8px;
        height: 5px;
        border-radius: 4px;
        background-color: #facc14;
        margin-left: 140px;
        margin-top: -30px;
        margin-right: 10px;
      }
    }
  }

  .earnings {
    .tips {
      margin-top: 50px;
      margin-left: 20px;
      font-size: 14px;
      color: #666;
      div {
        margin-top: 15px;
        i {
            display: inline-block;
            height: 5px;
            width: 8px;
            border-radius: 4px;
            background-color: #1890ff;
            margin-right: 10px;
          }
          .drinks {
        background-color: #2fc25b;
      }
      .health{
        background-color: #facc14;
      }
      .costume{
        background-color: #f04864;
      }
      .infant{
        background-color: #8543e0;
      }
      .other{
        background-color: #13c2c2;
      }
        }
      }
      .text {
        margin-right: 10px;
      }
      .percent {
        margin-left: 40px;
        margin-right: 40px;
      }
      .text-other {
        margin-right: 40px;
      }
      .percent-infant {
        margin-left: 40px;
        margin-right: 44px;
      }
      .percent-other {
        margin-left: 64px;
        margin-right: 48px;
      }
    .earnings-chart {
      width: 100%;
      height: 300px;
    }
    }

  .discounts {
    .discounts-chart {
      width: 100%;
      height: 300px;
      margin-top: -20px;
    }
    .text {
      font-size: 16px;
      color: #999;
      margin-bottom: 5px;
    }
    .data {
      font-size: 24px;
      i {
        font-style: normal;
        font-size: 14px;
      }
    }
  }

  .store {
    .store-chart {
      width: 100%;
      height: 300px;
      margin-top: -20px;
    }
    .tips {
      margin-left: 30px;
      font-size: 14px;
    }
    i {
      display: inline-block;
      width: 8px;
      height: 5px;
      border-radius: 4px;
      background-color: #1890ff;
      margin-right: 5px;
    }
    .dot-store {
      background-color: #2fc25b;
    }
    .dot-illegal {
      background-color: #facc14;
    }
  }

  .order {
    .left {
      margin-top: 30px;
      div {
        margin-bottom: 10px;
        .num {
          font-size: 24px;
          margin-right: 15px;
        }
        .compare {
          font-size: 14px;
          line-height: 24px;
          color: #999;
          margin-right: 20px;
        }
        .el-icon-caret-top {
          color: #00A854;
          margin-right: 10px;
        }
        .el-icon-caret-bottom {
          color: #F04134;
          margin-right: 10px;
        }
      }
      .top {
        margin-bottom: 30px;
      }
    }
    .text {
      font-size: 16px;
      color: #999;
      margin-bottom: 5px;
    }
    .order-chart {
      width: 100%;
      height: 300px;
    }
    .date {
      span {
        margin-left: 10px;
      }
    }
    .week {
    background-color: #1890FF;
    color: #fff;
    border-radius: 5px;
    padding: 2px 10px;
  }
  .calendar {
    font-size: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: #666;
    padding: 2px 10px;
    i {
      margin-left: 10px;
    }
    }
  }

  .quarter {
      font-size: 14px;
      span {
        border: 1px solid #ccc;
        padding: 2px 20px;
        &:first-child {
        border-radius: 5px 0 0 5px;
        border-color: #1890FF;
        }
        &:last-child {
          border-radius: 0 5px 5px 0;
        }
      }
    }
  }

</style>
